<template>
  <view class="itemBox vote" @click="proxy.$utils.toLink(`/packagePages/dynamic/listDetails?id=${item.id}`)">
    <view class="flex alignCenter">
      <view>
        <uv-avatar :src="item.avatar" size="43"></uv-avatar>
      </view>
      <view class="info">
        <view class="flex alignCenter">
          <text class="bold fz14 nickname">{{item.nickname}}</text>
          <view class="sex flex fz12 alignCenter">
            <uv-icon name="man" color="#fff" size="10"></uv-icon>
          </view>
        </view>
        <view class="desc fz12" style="color:#CCCCCC">{{item.ageYear}}·{{item.industry}}·{{item.homeEconomize}}·{{item.city}}</view>
      </view>
    </view>

    <view class="voteName fz14 bold ">
      <text style="color:#3798F2" v-if="item.votedName">#{{item.votedName}}</text>
      <text style="color:#3798F2;margin-left:10px">{{item.votedPrice}}</text>
      {{item.textContent}}
    </view>
    <view class="voteName fz14 bold">发起投票</view>

    <view class="progress">
      <view class="progressLine flex positionRelative">
        <view class="left shrink " v-if="percentage(item,'likeVoteCount')" :style="`width:${percentage(item,'likeVoteCount')}%`">
          <view style="padding-left:15px;">
            <view class="bold fz14">{{percentage(item,'likeVoteCount')}}%</view>
            <view class="fz12">想要</view>
          </view>
        </view>

        <view class="vsIcon" :style="vsIconStyle(item)" v-if="![0,100].includes(percentage(item,'likeVoteCount'))">
          <view class="image">
            <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/11/15/17316368611573548.png" width="30px" mode="widthFix"></uv-image>
          </view>
        </view>

        <view class="right shrink flex justifyFlexEnd" v-if="percentage(item,'dislikeVoteCount')" :style="`width:${percentage(item,'dislikeVoteCount')}%`">
          <view style="padding-right:15px;">
            <view class="bold fz14">{{percentage(item,'dislikeVoteCount')}}%</view>
            <view class="fz12">不想要</view>
          </view>
        </view>
      </view>

      <view class="flex alignCenter justifyBetween" style="margin-bottom:10px;">
        <view class="flex alignCenter avatarGroup">
          <uv-avatar-group :urls="item.voteLogos" size="20" gap="0.4"></uv-avatar-group>
          <text>+{{item.voteLogos&&item.voteLogos.length}}参加</text>
        </view>
        <text class="fz12" style="color: #3f38dd">还有{{item.voteEndTime}}天结束</text>
      </view>

      <view class="flex alignCenter justifyBetween" v-if="item.hasVoted==0">
        <view class="btn" @click.stop="toVoted(item,1,props.index)">
          <uv-button text="赞成" shape="circle" color="#266EFF"></uv-button>
        </view>
        <view class="btn" @click.stop="toVoted(item,0,props.index)">
          <uv-button text="反对" shape="circle" color="#FC6C6C"></uv-button>
        </view>
      </view>
    </view>

    <view class="imgs">
      <showImages v-model="item.imageContent"></showImages>
    </view>

    <view class="actionLine flex alignCenter justifyBetween">
      <view class="flex alignCenter">
        <view class="like flex alignCenter fz14" @click.stop="likeFunc(item,index)">
          <uv-icon name="heart" v-if="item.hasLiked==0" size="20" color="#E59840"></uv-icon>
          <uv-icon name="heart-fill" color="#E59840" v-else size="20"></uv-icon>
          <text v-if="item.likeCount" class="fz14 bold" style="color:#E59840">{{item.likeCount}}</text>
        </view>

        <view class="flex alignCenter comment" @click.stop="">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/29/17302171582193094.png" width="20px" height="20px"></uv-image>
          <text v-if="item.commentCount" style="color:#848484">{{item.commentCount}}</text>
        </view>

        <view class="comment" @click.stop="">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/29/17302175974797503.png" width="13px" height="13px"></uv-image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
import showImages from "@/components/main/showImages.vue";
let props = defineProps(["item", "index"]);

let item = computed(() => {
  return props.item;
});

function percentage(item, type) {
  let a = item[type];
  let b = item.likeVoteCount + item.dislikeVoteCount;
  if (a == 0 && b == 0) return 50;
  if (a == 0) return 0;
  return (a / b) * 100;
}

function vsIconStyle(item) {
  let a = percentage(item, "likeVoteCount");
  if ([1, 100].includes(a)) {
  } else {
    return { left: "calc(50% - 20px)" };
  }
}

async function toVoted(item, voteType, index) {
  if (item.hasVoted == 1) return;
  await proxy.$apis.movementsVote({ id: item.id, voteType });
  proxy.$utils.showToast("投票成功");
  if (voteType == 1) {
    props.item.likeVoteCount++;
  } else {
    props.item.dislikeVoteCount++;
  }
  props.item.hasVoted = 1;
}

//点赞
async function likeFunc(item, index) {
  await counter.toLike(item.hasLiked, item.id, 1);
  if (item.hasLiked) {
    props.item.hasLiked = 0;
    props.item.likeCount--;
    proxy.$utils.showToast("取消点赞成功");
  } else {
    props.item.hasLiked = 1;
    props.item.likeCount++;
    proxy.$utils.showToast("点赞成功");
  }
  //getInfo();
}
</script>



<style lang="scss" scoped>
.vote {
  .info {
    width: 100%;
    margin-left: 10px;
    .nickname {
      color: #3c69b4;
    }
  }
  .voteName {
    margin-top: 10px;
  }
  .progress {
    border-radius: 10px;
    margin: 15px 0;
    .btn {
      width: calc((100% - 15px) / 2);
    }
    .progressLine {
      height: 40px;
      color: white;
      margin-bottom: 10px;
      border-radius: 20px;
      overflow: hidden;
      .left {
        background-color: #266eff;
      }
      .right {
        background-color: #fc6c6c;
      }
      .vsIcon {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50px;
        background: white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        .image {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .avatarGroup {
    text {
      font-size: 12px;
      color: #3f38dd;
      margin-left: 10px;
    }
  }
  .map {
    margin: 10px 0;
    text {
      margin-left: 5px;
      color: #707070;
    }
  }
}
.itemBox {
  padding: 15px;
  background: white;
  border-radius: 10px;
  padding: 15px;
  .wrap {
    width: 100%;
    margin-left: 10px;
    .nickname {
      color: #3c69b4;
    }
    .desc {
      color: #d3d3d3;
      margin-top: 3px;
    }
    .intro {
      color: #2d2d2d;
      margin: 15px 0 10px;
    }
    .map {
      margin: 10px 0;
      text {
        margin-left: 3px;
        color: #707070;
      }
    }
  }
}
.actionLine {
  .like {
    width: 50px;
    text {
      margin-left: 3px;
    }
  }
  .comment {
    margin-left: 30px;
    width: 50px;
  }
  .more {
    display: blok;
    width: 100%;
  }
}
</style>

